<template>
    <div class="option-list-wrap">
        <a-divider orientation="left">选项配置</a-divider>

        <template v-if="selectItem.componentProps.options && selectItem.componentProps.options.length>0">
            <optionsItem :options="selectItem.componentProps.options" :tree="tree"></optionsItem>
        </template>

        <template v-else>
            <a-empty :image="simpleImage" description="暂无数据"/>
        </template>

        <a-button type="primary" size="small" @click="addOption" >新增选项</a-button>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import optionsItem from './optionsItem.vue';
import { Empty } from 'ant-design-vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const props = defineProps({
    selectItem: {
        type: Object,
    },
    tree: {
        type: Boolean,
        default: false
    }
})
/**
 * @method
 * @desc 添加选项
 */
const addOption = () => {
    if (props.selectItem.componentProps.options == undefined) {
        props.selectItem.componentProps.options = [];
    }
    props.selectItem.componentProps.options.push({
        label: '',
        value: '',
    })
}

</script>

<style lang="less" scoped>

.ant-empty{
    margin: 5px;
}

</style>